<template>
  <div>
      <a-row>
          <a-col :span="12"  class='mb20'>
              <a-input  placeholder="请输入名称"  style='width:200px'  v-model='search.keyWord'/>
              <a-button type="primary" @click='pageInit()'>搜索</a-button>
          </a-col>
      </a-row>
      <a-button  type="dashed"   class='mb16  mt12  ml20'  @click='addUser(search.entCode)'><a-icon type="plus-circle" />添加</a-button>
      <a-table :columns="columns"
          :rowKey="record => record.code"
          :dataSource="data"
          :pagination="pagination" 
          @change="handleTableChange"
        >
            <span slot='useable' slot-scope='text'>{{text | useable_status}}</span>
            <span slot="action" slot-scope="text, record"  > 
              <a-popconfirm title="确认停用该用户？" @confirm="optionsUser(record.code,1)"   okText="确认" cancelText="取消"  v-if='record.useable==1'>
                <a  class='color-blue'  >停用</a>
              </a-popconfirm>
              <a-popconfirm title="确认启用该用户？" @confirm="optionsUser(record.code,0)"   okText="确认" cancelText="取消"  v-else>
                <a  class='color-blue'  >启用</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a  class='color-blue'  @click='editUser(record.code)'>编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确认删除当前数据？" @confirm="confirmDelUser(record.code)"   okText="确认" cancelText="取消">
                  <a href="javascript:;"  class='color-red'>删除</a>
              </a-popconfirm>
            </span>
      </a-table>
      <!-- user-modal -->
    <addUser  ref='userModal' :visible='showAddUser' :systemUser='false' v-on:handleCancel='showAddUser=false'  v-on:handleOk='handleOkUser()'></addUser>
  </div>
</template>

<script>
const columns = [
  { title: '姓名',
    dataIndex: 'name',
    // sorter: true,
    // width: '20%',
    scopedSlots: { customRender: 'name' },
  }, {
    title: '登录名',
    dataIndex: 'loginName',
    
  }, {
    title: '角色',
    dataIndex: 'roleName',
  },{
    title: '部门',
    dataIndex: 'officeName',
  },{
    title: '联系方式',
    dataIndex: 'mobile',
  }, {
    title: '状态',
    dataIndex: 'useable',
    scopedSlots:{customRender:'useable'}
  },  
   {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];
import { listUser_of_ent,delUser,optionUser } from '@/api/system/index'
import  addUser  from  '@/components/system/userlist/addUser'
export default {
  name: 'entUser',
  data () {
    return {
        columns,
        data:[ ], 
        showAddUser:false,/*用户编辑 - 新增modal*/
        search:{
          keyWord:'',
          pageSize:10,
          pageNo:1,
          entCode:'',
        },
        pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,

          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },  
    }
  },
  created(){
      this.search.entCode = this.$route.query.entCode ? this.$route.query.entCode:this.$store.state.entCode
      this.pageInit()
  },
  methods:{
    pageInit(){ 
        listUser_of_ent(this.search).then((res)=>{
            if(res.data.flag == true){
              this.data = res.data.dataList
              this.pagination.total = res.data.totalRs
            }
         })
    },
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
    addUser(entCode){
        this.$refs.userModal.$emit('openDialog',entCode)
        this.showAddUser = true
    },
    handleOkUser(){
      this.showAddUser = false
      this.pageInit()
    },
    editUser(code){
        this.$refs.userModal.$emit('editDialog',code)
        this.showAddUser = true
    },
    optionsUser(code,num){
      let url =''
      if(num == 1){
        url='/sys/user/lock_user'//停用 用户
      }
      if(num == 0){
        url = '/sys/user/unlock_user'//启用 用户
      }
        optionUser(url,code).then((res)=>{
            this.$message.info(res.data.msg)
            this.pageInit()
        })
    },
    confirmDelUser(code){
      delUser(code).then((res)=>{
        if(res.data.flag == true){
          this.$message.success(res.data.msg)
          this.pageInit()
        }
      })
    },

  },
  computed:{
    
  },
  components:{
    addUser
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
